<template>
	<div class="outer">
		<scroll :bottomArea="44" ref="discover" @pullingDown="onpullingDown" @pullingUp="onpullingUp" :data="datalist">
  			<div class="swiper-container" id="discover-swiper">
				<div class="swiper-wrapper">
            		<div class="swiper-slide" v-for="i in bannerList" :key="i.id">
                		<img :src="i.imgFull" alt="banner">
           	 		</div>
        		</div>
        		<div class="swiper-pagination"></div>
			</div>
      <div class="theme-tab">
        <div class="wrapper" @click="setIndex(1)">
          <div class="img-area fst"></div>
          <div class="title">蜜里挑优</div>
          <div class="tab-b" :class="{'active': activeTab==1}"></div>
        </div>
        <div class="wrapper" @click="setIndex(2)">
          <div class="img-area secd"></div>
          <div class="title">苹果精选</div>
          <div class="tab-b" :class="{'active':activeTab==2}"></div>
        </div>
        <div class="wrapper" @click="setIndex(3)">
          <div class="img-area thd"></div>
          <div class="title">新品日历</div>
          <div class="tab-b" :class="{'active':activeTab==3}"></div>
        </div>
        <div class="wrapper" @click="setIndex(4)">
          <div class="img-area  firtd"></div>
          <div class="title">蜜友头条</div>
          <div class="tab-b" :class="{'active':activeTab==4}"></div>
        </div>
      </div>
			<div class="article-wrapper">
        <div class="article" v-for=" n in promotionItem" @click="goServiceInfo(n.id)">
          <div class="img-area">
            <img :src="n.imgFull">
          </div>
          <div class="content-area">
            <div class="title">{{n.title}}</div>
            <div class="message">
              {{n.introduction}}
            </div>
            <div class="button-area">
              <div class="left-icon">
                {{n.label}}
              </div>
              <div class="right">
                已有<span>{{n.browseNum}}</span>人下单租赁
              </div>
           </div>
          </div>
        </div>
      </div>
  	</scroll>
	</div>
</template>

<script>
import {getDiscoverBanner,getPromotion} from "@/api/homepage.js"
export default {
  name: 'discover',
  components: {
  },
  data: function(){
  	return {
  		bannerList: [],
  		swiper: {},
  		pageNum: 1,
  		promotionItem: [],
  		hasMore: true,
  		pageSize: 10,
  		activeTab: 1,
  		datalist: [],
      type: "TOPIC",
  	}
  },
  methods: {
    onpullingDown: function(){
      this.promotions();
    },
    onpullingUp: function(){
      if(this.hasMore){
        this.loadMore();
      }else {
        this.$refs.discover.forceUpdate();
      }
    },
  	getBanner: function(){
  		getDiscoverBanner().then(data => {
  			if(data.code == 200){
  				this.bannerList = data.data;
  				this.setSlides();
  			}else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
        }
  		})
  	},
  	setSlides: function(){
  		this.swiper =  new Swiper('#discover-swiper',{
          observer: true,
          loop: false,
          pagination: {
            el: '.swiper-pagination',
            type: 'bullets',
            bulletElement : 'li',
            bulletClass : 'my-bullet',
          }
      	});
  	},
  	promotions: function(){
  		this.pageNum = 1;
  		getPromotion(this.pageNum,this.type).then( data => {
  			if(data.code == 200){
          this.promotionItem = data.data.list;
          if(this.promotionItem.length < this.pageSize){
              this.hasMore = false;
          }else {
               this.hasMore = true;
          }
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
  				this.hasMore = false;
          this.$refs.discover.forceUpdate();
  			}
  			this.datalist = this.promotionItem;
  		})
  	},
    loadMore: function(){
      this.pageNum ++;
      getPromotion(this.pageNum,this.type).then( data => {
        if(data.code == 200){
          if(data.data.list.length<this.pageSize){
            this.hasMore = false;
          }else {
            this.hasMore = true;
          }
          this.promotionItem = this.promotionItem.concat(data.data.list);
        }else {
          this.$vux.toast.show({
            text: data.message,
            time: 1000,
            width: 'auto',
            // position: 'middle'
          })
          this.hasMore = false;
          this.$refs.discover.forceUpdate();
        }
      })
    },
  	setIndex: function(index){
        this.activeTab = index;
        this.hasMore = true;
        if(index == 1){
          this.type = "BEST";
        }else if (index ==2){
            this.type = "PREFERRED";
        }else if (index == 3){
          this.type =  "CALENDAR";
        }else{
          this.type =  "TOPIC";
        }
        this.promotions();
    },
    goServiceInfo: function(id){
    	this.$router.push({name:'discoverInfo' , params: {'id': id}});
    }
  },
  mounted: function(){
    if(sessionStorage.discoverTab){
      this.activeTab = sessionStorage.discoverTab;
    }else {
      this.activeTab = 1;
    }
    if(this.activeTab == 1){
      this.type = "BEST";
    }else if(this.activeTab == 2){
      this.type = "PREFERRED";
    }else if(this.activeTab == 3){
      this.type = "CALENDAR";
    }else {
      this.type = "TOPIC";
    }
  	this.getBanner();
  	this.promotions();
  },
  beforeDestroy: function(){
    sessionStorage.discoverTab = this.activeTab;
  }
}
</script>

<style lang="scss" scoped>
	.outer {
		height: 100%;
    	width: 100%;
    	position: absolute;
	}
	#discover-swiper {
		width: 100%;
		height: 172px;
    	& img {
      		width: 100%;
    	}
	}
	// 分页器样式
  .swiper-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10px;
  }
  .tabs {
  	width: 100%;
  	height: 40px;
  	display: flex;
  	justify-content: center;
  	align-items: center;
  	background: #fff;
  	font-size: 14px;
  	color: #999;
  	border-bottom: 1px solid #eee;
  	& .active {
  		color: #4c5b71;
  	}
  	&>div {
  		box-sizing: content-box;
  		width: 50%;
  		text-align: center;
		&:not(:last-child){
			border-right: 1px solid #eee;
		}
  	}
  }
  .promotion-center {
  	padding: 0 16px;
  	& .promotion-item {
  		margin-top: 8px;
  		border-radius: 5px;
  		background: #fff;
  		overflow: hidden;
  		& .img-area {
  			width: 100%;
  		}
  		& .content-area {
  			padding: 10px 8px;
  			&>span {
  				line-height: 20px;
  				font-size: 14px;
  				color: #333;
  			}
  			&>div {
  				font-size: 10px;
  				color: #999;
  				line-height: 16px;
  				height: 32px;
  			}
  		}
  	}
  }
.theme-tab {
    background: #fff;
    margin-bottom: 5px;
    height: 83px;
    padding: 0 16px;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    & .wrapper {
      width: 25%;
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      & .img-area {
        margin-top: 20px;
        width: 24px;
        height: 24px;
        background: url('../../assets/img/lease/dis_icon.png') 0 0 no-repeat;
        background-size: 260%;
      }
      & .fst {
        background-position: 14% 87%;
      }
      & .secd {
        background-position: 14% 11%;
      }
      & .thd {
        background-position: 91% 6%;
      }
      & .firtd {
        background-position: 91% 87%;
      }
      & .title {
        font-size: 12px;
        color: #9b9b9b;
        line-height: 14px;
      }
      & .tab-b {
        width: 20px;
        height: 2px;
      }
      & .active {
        background: #4c5b72;
      }
    }
  }
</style>